import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:flutter_swiper_view/flutter_swiper_view.dart';
import 'package:get/get.dart';

import '../../../routes/app_pages.dart';
import '../../../services/IconFonts.dart';
import '../../../services/httpsClient.dart';
import '../../../services/keepAliveWrapper.dart';
import '../../../services/screenAdapter.dart';
import '../controllers/home_controller.dart';

HttpsClient client = HttpsClient();

class HomeView extends GetView<HomeController> {
  const HomeView({Key? key}) : super(key: key);
  Widget _Appbar() {
    return Positioned(
      top: 0,
      left: 0,
      right: 0,
      child: Obx(() => AppBar(
            leading: controller.flag.value
                ? Text("")
                : const Icon(
                    IconFonts.xiaomi,
                    color: Colors.white,
                  ),
            leadingWidth: controller.flag.value
                ? ScreenAdapter.width(40)
                : ScreenAdapter.width(140),
            title: AnimatedContainer(
              //动画
              width: controller.flag.value
                  ? ScreenAdapter.width(820)
                  : ScreenAdapter.width(620),
              height: ScreenAdapter.height(96),
              decoration: BoxDecoration(
                // color: const Color.fromARGB(230, 252, 243, 236),
                color: const Color.fromRGBO(246, 246, 246, 1),
                borderRadius: BorderRadius.circular(20),
              ),
              duration: const Duration(milliseconds: 600),
              child: InkWell(
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Padding(
                      padding: EdgeInsets.fromLTRB(ScreenAdapter.width(34), 0,
                          ScreenAdapter.width(10), 0),
                      child: const Icon(
                        Icons.search,
                        color: Colors.black54,
                      ),
                    ),
                    Text("手机",
                        style: TextStyle(
                            color: Colors.black54,
                            fontSize: ScreenAdapter.fontSize(32)))
                  ],
                ),
                onTap: () {
                  //不带参数传值跳转
                  Get.toNamed(Routes.SEARCH);
                },
              ),
            ),
            centerTitle: true,
            backgroundColor:
                controller.flag.value ? Colors.white : Colors.transparent,
            elevation: 0,
            actions: [
              IconButton(
                  onPressed: () {},
                  icon: Icon(
                    Icons.qr_code,
                    color: controller.flag.value ? Colors.black : Colors.white,
                  )),
              IconButton(
                  onPressed: () {},
                  icon: Icon(Icons.message,
                      color:
                          controller.flag.value ? Colors.black : Colors.white))
            ],
          )),
    );
  }

  Widget _focus() {
    return SizedBox(
      width: ScreenAdapter.width(1080),
      height: ScreenAdapter.height(682),
      child: Obx(() => Swiper(
            itemBuilder: (context, index) {
              /*   String picUrl =
                  'https://miapp.itying.com/${controller.swiperList[index].pic}';*/

              return Image.network(
                HttpsClient.replaeUri(controller.swiperList[index].pic),
                fit: BoxFit.cover,
              );
            },
            indicatorLayout: PageIndicatorLayout.COLOR,
            autoplay: true,
            itemCount: controller.swiperList.length,
            pagination: const SwiperPagination(builder: SwiperPagination.rect),
            duration: 2000,
            // control: const SwiperControl(),  去掉控制器
          )),
    );
  }

  Widget _banner() {
    return SizedBox(
      width: ScreenAdapter.width(1080),
      height: ScreenAdapter.height(92),
      child: Image.asset(
        'assets/images/xiaomiBanner.png',
        fit: BoxFit.cover,
      ),
    );
  }

  Widget _banner2() {
    return Padding(
      padding: EdgeInsets.fromLTRB(ScreenAdapter.width(20),
          ScreenAdapter.height(10), ScreenAdapter.width(20), 0),
      child: Container(
          height: ScreenAdapter.height(420),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            image: DecorationImage(
                fit: BoxFit.cover,
                image: AssetImage(
                  'assets/images/xiaomiBanner2.png',
                )),
          )),
    );
  }

  Widget _bellSetting() {
    return Column(
      children: [
        Padding(
          padding: EdgeInsets.fromLTRB(ScreenAdapter.width(20),
              ScreenAdapter.width(30), ScreenAdapter.width(20), 0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                '热销甄选',
                style: TextStyle(
                    fontSize: ScreenAdapter.fontSize(46),
                    fontWeight: FontWeight.bold),
              ),
              Text(
                '更多手机推荐 > ',
                style: TextStyle(fontSize: ScreenAdapter.fontSize(46)),
              )
            ],
          ),
        ),
        Padding(
          padding: EdgeInsets.fromLTRB(ScreenAdapter.width(20),
              ScreenAdapter.width(30), ScreenAdapter.width(10), 0),
          child: Row(
            children: [
              //左侧
              Expanded(
                flex: 1,
                child: SizedBox(
                  height: ScreenAdapter.height(738),
                  child: Obx(() => Swiper(
                        itemBuilder: (context, index) {
                          /*String picUrl =
                              'https://miapp.itying.com/${controller.bestSellingSwiperList[index].pic}';
                          String picUrlData = picUrl.replaceAll('\\', '/');*/
                          // print('picUrlData:' + picUrlData);
                          return Image.network(
                            // picUrl.replaceAll('\\', '/'), //这个里面存在一个转义字符 \\
                            //picUrl,
                            //picUrlData,
                            HttpsClient.replaeUri(
                                controller.bestSellingSwiperList[index].pic),

                            fit: BoxFit.cover,
                          );
                        },
                        indicatorLayout: PageIndicatorLayout.COLOR,
                        autoplay: true,
                        itemCount: controller.bestSellingSwiperList.length,
                        /*  pagination:
                        const SwiperPagination(builder: SwiperPagination.rect),*/
                        pagination: SwiperPagination(
                            margin: const EdgeInsets.only(top: 10),
                            builder: SwiperCustomPagination(builder:
                                (BuildContext context,
                                    SwiperPluginConfig config) {
                              return ConstrainedBox(
                                constraints:
                                    const BoxConstraints.expand(height: 10.0),
                                child: Row(
                                  children: <Widget>[
                                    Expanded(
                                      child: Align(
                                        alignment: Alignment.center,
                                        child:
                                            const RectSwiperPaginationBuilder(
                                          color: Colors.white,
                                          activeColor: Colors.grey,
                                          size: const Size(10.0, 3.0),
                                          activeSize: const Size(10.0, 3.0),
                                        ).build(context, config),
                                      ),
                                    )
                                  ],
                                ),
                              );
                            })),

                        duration: 2000,
                        // control: const SwiperControl(),  去掉控制器
                      )),
                ),
              ),
              SizedBox(width: ScreenAdapter.width(20)),
              //右侧
              Expanded(
                flex: 1,
                child: Container(
                  height: ScreenAdapter.height(738),
                  child: Obx(() => Column(
                          // children: controller.sellingPList.map((value) {
                          children: controller.sellingPList
                              .asMap()
                              .entries
                              .map((entrie) {
                        var value = entrie.value;

                        /*String picUrl = 'https://miapp.itying.com/${value.pic}'
                            .replaceAll('\\', '/');*/
                        return Expanded(
                            flex: 1,
                            child: Container(
                              color: const Color.fromRGBO(246, 246, 246, 1),
                              margin: EdgeInsets.fromLTRB(
                                  0,
                                  0,
                                  0,
                                  entrie.key == 2
                                      ? 0
                                      : ScreenAdapter.height(20)),
                              child: Row(
                                children: [
                                  Expanded(
                                    flex: 3,
                                    child: Column(
                                      children: [
                                        SizedBox(
                                            height: ScreenAdapter.height(20)),
                                        Text(value.title!,
                                            style: TextStyle(
                                                fontSize:
                                                    ScreenAdapter.fontSize(38),
                                                fontWeight: FontWeight.bold)),
                                        SizedBox(
                                            height: ScreenAdapter.height(20)),
                                        Text(value.subTitle!,
                                            style: TextStyle(
                                                fontSize:
                                                    ScreenAdapter.fontSize(
                                                        28))),
                                        SizedBox(
                                            height: ScreenAdapter.height(20)),
                                        Text("${value.price}",
                                            style: TextStyle(
                                                fontSize:
                                                    ScreenAdapter.fontSize(34)))
                                      ],
                                    ),
                                  ),
                                  Expanded(
                                    flex: 2,
                                    child: Padding(
                                      padding: EdgeInsets.all(
                                          ScreenAdapter.height(8)),
                                      child: Image.network(
                                          // "https://www.itying.com/images/kaoxiang.png",
                                          //picUrl,
                                          HttpsClient.replaeUri(value.pic),
                                          fit: BoxFit.cover),
                                    ),
                                  )
                                ],
                              ),
                            ));
                      }).toList())),
                ),
              ),
            ],
          ),
        )
      ],
    );
  }

  Widget _bestGoods() {
    return Column(children: [
      Padding(
        padding: EdgeInsets.fromLTRB(ScreenAdapter.width(20),
            ScreenAdapter.width(30), ScreenAdapter.width(20), 0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              '省心优惠',
              style: TextStyle(
                  fontSize: ScreenAdapter.fontSize(46),
                  fontWeight: FontWeight.bold),
            ),
            Text(
              '全部优惠 > ',
              style: TextStyle(fontSize: ScreenAdapter.fontSize(46)),
            )
          ],
        ),
      ),
      Obx(() => Container(
          color: Color.fromRGBO(246, 246, 246, 1),
          padding: EdgeInsets.fromLTRB(ScreenAdapter.width(20),
              ScreenAdapter.width(30), ScreenAdapter.width(20), 0),
          child: MasonryGridView.count(
            crossAxisCount: 2,
            mainAxisSpacing: ScreenAdapter.width(20),
            crossAxisSpacing: ScreenAdapter.width(20),
            shrinkWrap: true, //收缩 让元素宽度自适应
            itemCount: controller.bestPList.length,
            physics: const NeverScrollableScrollPhysics(), //静止左右滑动
            itemBuilder: (context, index) {
              //  var height = 50 + 150 * Random().nextDouble();
              return InkWell(
                onTap: () {
                  Get.toNamed("/product-content",
                      arguments: {"id": controller.bestPList[index].sId});
                },
                child: Container(
                  //  height: height,
                  //  color: Colors.white,
                  decoration: BoxDecoration(
                      // border: Border.all(color: Colors.white, width: 1),
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10)),
                  child: Column(
                    children: [
                      Container(
                        padding: EdgeInsets.all(10),
                        child: Image.network(
                          //'https://miapp.itying.com/${controller.bestPList[index].pic?.replaceAll('\\', '/')}',
                          HttpsClient.replaeUri(
                              controller.bestPList[index].pic),
                          fit: BoxFit.cover,
                        ),
                      ),
                      Container(
                        width: double.infinity,
                        padding: EdgeInsets.fromLTRB(ScreenAdapter.width(40),
                            ScreenAdapter.width(10), 0, 0),
                        child: Text(
                          '${controller.bestPList[index].title}',
                          style: TextStyle(
                              fontSize: ScreenAdapter.fontSize(34),
                              fontWeight: FontWeight.bold),
                          textAlign: TextAlign.start,
                        ),
                      ),
                      Container(
                        width: double.infinity,
                        padding: EdgeInsets.fromLTRB(ScreenAdapter.width(40),
                            ScreenAdapter.width(10), 0, 0),
                        child: Text(
                          '${controller.bestPList[index].subTitle}',
                          style: TextStyle(
                              fontSize: ScreenAdapter.fontSize(34),
                              fontWeight: FontWeight.bold),
                          textAlign: TextAlign.start,
                        ),
                      ),
                      Container(
                        width: double.infinity,
                        padding: EdgeInsets.fromLTRB(ScreenAdapter.width(40),
                            ScreenAdapter.width(10), 0, 0),
                        child: Text(
                          '${controller.bestPList[index].price}元',
                          style:
                              TextStyle(fontSize: ScreenAdapter.fontSize(24)),
                          textAlign: TextAlign.start,
                        ),
                      )
                    ],
                  ),
                ),
              );
            },
          )))
    ]);
  }

  Widget _category() {
    return SizedBox(
      width: ScreenAdapter.width(1080),
      height: ScreenAdapter.height(460),
      child: Obx(() => Swiper(
            itemBuilder: (context, index) {
              return GridView.builder(
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisSpacing: ScreenAdapter.width(10), //水平子 Widget 之间间距
                    mainAxisSpacing: ScreenAdapter.width(10), //垂直子 Widget 之间间距
                    crossAxisCount: 5, //一行的 Widget 数量
                  ),
                  //itemBuilder: _buildItemView,
                  itemBuilder: (BuildContext context, int i) {
                    /*  String picUrl =
                        'https://miapp.itying.com/${controller.categoryList[index * 10 + i].pic}';*/
                    /*   return Image.network(
                      picUrl.replaceAll('\\', '/'), //这个里面存在一个转义字符 \\
                      fit: BoxFit.cover,
                    );
                    */
                    return Column(
                      children: [
                        Container(
                          alignment: Alignment.center,
                          width: ScreenAdapter.height(140),
                          height: ScreenAdapter.height(140),
                          child: Image.network(
                            // picUrl
                            HttpsClient.replaeUri(
                                controller.categoryList[index * 10 + i].pic),
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.fromLTRB(
                              0, ScreenAdapter.height(5), 0, 0),
                          child: Text(
                              controller.categoryList[index * 10 + i].title!,
                              style: TextStyle(
                                  fontSize: ScreenAdapter.fontSize(34))),
                        )
                      ],
                    );
                  },
                  itemCount: 10);
            },
            indicatorLayout: PageIndicatorLayout.COLOR,
            pagination: SwiperPagination(
                margin: const EdgeInsets.only(top: 10),
                builder: SwiperCustomPagination(
                    builder: (BuildContext context, SwiperPluginConfig config) {
                  return ConstrainedBox(
                    constraints: const BoxConstraints.expand(height: 10.0),
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          child: Align(
                            alignment: Alignment.center,
                            child: const RectSwiperPaginationBuilder(
                              color: Colors.black12,
                              activeColor: Colors.black,
                              size: const Size(20.0, 3.0),
                              activeSize: const Size(20.0, 3.0),
                            ).build(context, config),
                          ),
                        )
                      ],
                    ),
                  );
                })),

            // autoplay: true,
            itemCount: (controller.categoryList.length / 10).toInt(),
            duration: 2000,
            // control: const SwiperControl(),  去掉控制器
          )),
    );
  }

  Widget _home() {
    return Positioned(
        top: -40,
        left: 0,
        right: 0,
        bottom: 0,
        child: ListView(
          controller: controller.scrollController, //绑定controlldr
          children: [
            _focus(),
            _banner(),
            _category(),
            _banner2(),
            _bellSetting(),
            _bestGoods()
          ],
        ));
  }

  @override
  Widget build(BuildContext context) {
    return KeepAliveWrapper(
        child: Scaffold(
      body: Stack(
        children: [_home(), _Appbar()],
      ),
    ));
  }
}
